<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" style="width: 750rpx; height: 750rpx;">
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
		</swiper>
		
		<view style="background-color: #f0f0f0;">
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			<view class="flex align-center justify-center" style="width:750rpx">
				<view class="flex flex-column" style="width: 710rpx; border-radius: 20rpx; background-color: white; padding-left: 15rpx;">
					<view class="flex">
						<text style="margin-left: 20rpx; margin-top: 20rpx; font-size: 45rpx; font-weight: bold;">{{petInfo.animalName}}</text>
					</view>
					
					<view class="flex">
						<image src="https://www.dogeman.studio/public/uploads/static/functions/id.png" style="margin-left: 15rpx;  margin-top:5rpx; margin-right: 5rpx; width:35rpx;height:35rpx; background-color: white;"></image>
						<text style="font-size: 30rpx;">{{petInfo.id}}</text>
						<image src="https://www.dogeman.studio/public/uploads/static/functions/center.png" style="margin-left: 25rpx; margin-top:5rpx; margin-right: 5rpx; width:35rpx;height:35rpx; background-color: white;"></image>
						<text style="font-size: 30rpx;">{{petInfo.stationName}}</text>
					</view>
					
					<view class="flex align-center" style="margin-left: 25rpx;">
					<view v-if="petInfo.sterilized === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">已绝育</text>
					</view>
					<view v-if="petInfo.immune === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">已免疫</text>
					</view>
					<view v-if="petInfo.parasite === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">已驱虫</text>
					</view>
					</view>
					
					<view class="rounded-circle flex align-center" style="margin-left: 15rpx; margin-top: 15rpx;">
					<text style="color:goldenrod; font-size: 45rpx; font-weight: bold;">“{{petInfo.animalBrief}}”</text>
					</view>
					<view class="flex" style="margin-left: 15rpx; margin-right: 15rpx;">
					<text style="font-size: 30rpx;">{{petInfo.animalIntroduction}}</text>
					</view>
					
					<view class="flex">
						<image src="https://www.dogeman.studio/public/uploads/static/swiper/split_line.png" style="width: 750rpx; height: 75rpx;"></image>
					</view>
					
				</view>
			</view>
			
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			<view class="flex align-center justify-center" style="width:750rpx">
				<view class="flex flex-column" style="width: 710rpx; border-radius: 20rpx; background-color: white; padding-left: 15rpx;">
					
					<text style="font-size: 40rpx; font-weight: bold;">云养告知</text>
					<text style="font-size: 30rpx;">指定云养4周起养，云养完成后若需继续云养重新购买后继续云养。如不满意本次云养，平台将未到期的云养款按比例退款</text>
				</view>
			</view>
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			
			<text style="margin-left: 25rpx; font-size: 40rpx; font-weight: bold;">最新动态</text>
			
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			<view class="flex align-center justify-center" style="width:750rpx">
				<view class="flex flex-column" style="width: 710rpx; border-radius: 20rpx; background-color: #f0f0f0; padding-left: 15rpx;">
				
				<view v-for="(item,index) in newsList[0].list" :key="index">
				<!-- 列表样式 -->
					<common-list2 :item="item" :index="index" @follow="follow" @doSupport="doSupport"></common-list2>
					<view style="height: 20rpx; background-color: #f0f0f0; width: 750rpx;"></view>
				</view>
					
				
				<!-- 上拉加载 -->
				<view class="flex align-center justify-center">
					<text style="font-size:35rpx; color: gray;">没有更多了</text>
				</view>
				<!-- <load-more :loadmore="item.loadmore"></load-more> -->
						
					
				</view>
			</view>
			
		</view>
		
		<view style="height: 100rpx; background-color: #f0f0f0;"></view>
		
		<view class="flex align-stretch bg-white position-fixed left-0 bottom-0 right-0" style="height: 100rpx; z-index: 100; background-color: #f0f0f0;">
			<view class="flex flex-4 align-center">
				<text class="text-main" style="font-size: 40rpx; margin-left: 25rpx; font-weight: bold;">合计¥{{petInfo.claimPrice}}(4周)</text>
				<image src="https://www.dogeman.studio/public/uploads/static/functions/exclamation.png" style="margin-left: 25rpx; margin-top:5rpx; margin-right: 5rpx; width:35rpx;height:35rpx; background-color: #f0f0f0;" @click="openAdoptInfo"></image>
				<text style="color: #8a8a8a;" @click="openAdoptInfo">云养须知</text>
			</view>
			<view v-if="petStatus === 0" class="flex flex-2 align-center justify-center bg-main" hover-class="bg-main-hover" @click="openPayment">
					<text style="color: white; font-size: 40rpx;">云养它</text>
			</view>
			
			<view v-if="petStatus === 1" class="flex flex-2 align-center justify-center bg-main" hover-class="bg-main-hover" @click="openPayment">
					<text style="color: white; font-size: 35rpx;">已云养，可续费</text>
			</view>
			
			<view v-if="petStatus === 2" class="flex flex-2 align-center justify-center" hover-class="bg-main-hover" style="background-color: gray;">
					<text style="color: white; font-size: 40rpx;">已被云养</text>
			</view>
			
		</view>
		
		
		
		
	</view>
</template>

<script>
	// const demo = [{
	// 			username: "昵称",
	// 			userpic: "/static/default.jpg",
	// 			newstime: "2023-2-23 13:36",
	// 			isFollow: false,
	// 			title:"标题",
	// 			titlepic:"/static/demo/datapic/11.jpg",
	// 			support:{
	// 				type:"support",
	// 				support_count: 1,
	// 				unsupport_count: 2
	// 			},
	// 			comment_count: 2,
	// 			share_num: 2
	// 			},{
	// 				username: "昵称",
	// 				userpic: "/static/default.jpg",
	// 				newstime: "2023-2-23 13:36",
	// 				isFollow: false,
	// 				title:"标题",
	// 				titlepic:"",
	// 				support:{
	// 					type:"support",
	// 					support_count: 1,
	// 					unsupport_count: 2
	// 				},
	// 				comment_count: 2,
	// 				share_num: 2
	// 			},{
	// 				username: "昵称",
	// 				userpic: "/static/default.jpg",
	// 				newstime: "2023-2-23 13:36",
	// 				isFollow: false,
	// 				title:"标题",
	// 				titlepic:"",
	// 				support:{
	// 					type:"",
	// 					support_count: 1,
	// 					unsupport_count: 2
	// 				},
	// 				comment_count: 2,
	// 				share_num: 2
	// 			}];
	
	import commonList2 from '@/components/common/common-list2.vue';
	
	export default {
		data() {
			return {
				newsList: [],
				petInfo: [],
				petStatus: 0 // 0:云养它；1:已云养，可续费；2:已被云养
			}
		},
		components: {
			commonList2
		},
		onReachBottom(){
			this.loadmore();
		},
		onLoad(e) {
			console.log(e);
			this.getpetData(e.id);
			this.getnewsData(e.id);
		},
		methods: {
			openAdoptInfo(){
				uni.showToast({
					title: '测试版尚未给出云养规则哦～',
					icon: 'none'
				});
			},
			openPayment(){
				uni.showToast({
					title: '测试版尚未开通支付功能哦～',
					icon: 'none'
				});
			},
			getpetData(id){
				return this.$H.get('/rescue_station/byAnimalIdInfo/'+id).then(res=>{
					this.petInfo = res
					if(this.petInfo.ownerId){
						if(this.petInfo.ownerId === this.$store.state.user.id){
							this.petStatus = 1
						}else{
							this.petStatus = 2
						}
					}
					else{
						this.petStatus = 0
					}
					
				}).catch(err=>{
				})
			},
			getnewsData(id){
				this.$H.get('/rescue_station/byAnimalIdPost/'+id).then(res=>{
					
					var arr = []
					
						
					let demo = []
					
					// 生成列表模板
					let obj = {
						// "上拉加载更多", "加载中...", "没有更多了"
						loadmore: "上拉加载更多",
						list: []
					}
					
					for (let j=0; j<res.length;j++){
						demo.push(
						{
							id: res[j].id,
							user_id: res[j].user_id,
							imgList: res[j].imgList,
							username: this.petInfo.stationName,
							userpic: "https://www.dogeman.studio/public/uploads/static/default.jpg",
							newstime: res[j].updated_time,
							content: res[j].content,
							isFollow: false,
							title: res[j].title,
							titlepic: res[j].titleImg ? res[j].titleImg : "",
							support:{
								type:"support",
								support_count: 1,
								unsupport_count: 2
							},
							comment_count: 2,
							share_num: 2
						})
					}
					console.log(demo)
					obj.list = demo
					
					arr.push(obj)
					
					
					this.newsList = arr
					
				}).catch(err=>{
				})
			},
			// 关注
			follow(e){
				this.list[e].isFollow = true
				uni.showToast({ title: '关注成功' })
			},
			//顶踩操作
			doSupport(e){
				// 拿到当前对象
				let item = this.list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				// 判断之前是否已经顶踩
				if (item.support.type === ''){
					this.list[e.index].support.type = e.type
					this.list[e.index].support[e.type+'_count'] ++
					return;
				} else if (item.support.type === 'support' && e.type === "unsupport"){
					item.support.support_count -- 
					item.support.unsupport_count ++ 
				} else if (item.support.type === 'unsupport' && e.type === "support"){
					item.support.support_count ++
					item.support.unsupport_count --
				} 
				item.support.type = e.type
				uni.showToast({
					title: msg + "成功"
				})	
			},
			loadmore(){
				// let item = this.newsList
				// // 判断是否处于可加载状态 (上拉加载更多)
				
				
				
				// if (item[0].loadmore !== '上拉加载更多') {
				// 	return;
				// }
				
				// // 修改当前加载状态
				// item[0].loadmore = "加载中..."
				
				// 模拟数据请求
				// setTimeout(()=>{
				// 	item[0].list = [...item[0].list,...item[0].list]
				// 	item[0].loadmore = "上拉加载更多"
				// }, 2000)
				
				// item.loadmore = "没有更多了"
			}		
		}
	}
</script>

<style>

</style>
